<template>
  <div class="bargain">
     <div 
      class="bargain_item" 
      v-for="(item, index) in bargainList" 
      :key="index" 
      @click="goto(item)"
      v-show="index>=9 && index <=14">
          <div class="bargain_img">
              <img :src="item.pic">
          </div>
          <div class="bargain_content">
            <div class="bargain_content_title">{{item.name}}</div> 
            <div class="bargain_content_desc">{{item.characteristic}}</div>
            <div class="bargain_container_count">
                <div class="bargain_count_items">
                    <div class="bargain_count_item">
                        <p class="lowPrice_num">￥{{item.minPrice}}</p>
                        <p class="lowPrice_text">低价</p>
                    </div>
                    <div class="bargain_count_item">
                        <p class="oriPrice_num">￥{{item.originalPrice}}</p>
                        <p class="oriPrice_text">原价</p>
                    </div>
                    <div class="bargain_count_item">
                        <p class="salePrice_num">{{item.stores}}件</p>
                        <p class="salePrice_text">限量</p>
                    </div>
                </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            bargainList: []
        }
    },
    mounted() {
      this.$API.getList().then(res=> {
            // console.log(res.data.data)
            this.bargainList = res.data.data
        })
    },
    methods: {
        goto(item) {
            // console.log(item.id)
            this.$API.getDetail({
                params: {
                    id: item.id
                }
            }).then(res=> {
                console.log(res)
            })
        }
    }
}
</script>

<style scoped>
.bargain {
  margin-top: 1.1rem;
}
.bargain_item {
    width: 100%;
    height: 2.8rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.01rem solid #eee;
}
.bargain_img {
    width: 35%;
    height: 2.5rem;
}
.bargain_img img {
    margin: 0.1rem;
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
}
.bargain_content {
    width: 60%;
}
.bargain_content_title {
    font-size: 0.3rem;
    color: #333;
    margin: 0.1rem 0;
}
.bargain_content_desc {
    font-size: 0.2rem;
    color: #666;
    margin: 0.1rem 0;
}
.bargain_container_count {
    width: 70%;
    height: 0.5rem;
    margin-top: 0.4rem;
}
.bargain_count_items {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bargain_count_item {
    font-size: 0.25rem;
    color: #666;
}
.lowPrice_num {
    color: red;
    font-weight: bold;
}
.lowPrice_text {
    color: black;
}
</style>